<template>
  <div>
    <button class="btn" @click="show = !show">点击切换</button>

    <transition name="tr" mode="out-in">
      <p v-if="show">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
        facilisis enim libero, at lacinia diam fermentum id. Pellentesque
        habitant morbi tristique senectus et netus.
      </p>
    </transition>

    <card>
      <img
        src="https://images.unsplash.com/photo-1520182205149-1e5e4e7329b4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
        alt="image of a woman on a train"
      />
      <p>sorry</p>
    </card>

    <div flex="~">
      <button @click="add" class="btn">Add</button>
      <span class="inline-block w-10"></span>
      <button @click="shuffle" class="btn">Shuffle</button>

      <span class="inline-block w-10"></span>
      <button @click="remove" class="btn">Remove</button>
    </div>

    <transition-group
      :name="animateArr[transitionIndex].name"
      :duration="durationName"
      :mode="animateArr[transitionIndex].mode"
      tag="p"
    >
      <span
        v-for="item in items"
        :key="item"
        class="w-10 h-10 rounded-md inline-flex justify-center items-center bg-dark-200 text-light-100 mr-3 mb-3 transform transition-all duration-500 ease"
      >
        {{ item }}
      </span>
    </transition-group>

    <button class="btn" @click="toggleScale">scale slide</button>

    <transition name="scale" class="relative">
      <div v-if="scaleShow">
        <img src="@/assets/1.jpeg" alt="" />
      </div>

      <div v-else>
        <img src="@/assets/2.jpeg" alt="" />
      </div>
    </transition>

    <button class="btn" @click="goTest">跳转</button>
  </div>
</template>

<script setup lang="ts" name="ShowPage">
const show = ref(false);

const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const nextNum = ref(10);

const randomIndex = () => Math.floor(Math.random() * items.value.length);
const add = () => {
  items.value.splice(randomIndex(), 0, ++nextNum.value);
};
const remove = () => {
  items.value.splice(randomIndex(), 1);
};
const shuffle = () => {
  items.value.sort(() => Math.random() - 0.5);
};

type ModeEnum = 'default' | 'in-out' | 'out-in';
interface AnimateType {
  name: string;
  mode: ModeEnum;
  duration?: number;
  duration2?: {
    enter: number;
    leave: number;
  };
}
const animateArr = ref<AnimateType[]>([
  {
    name: 'list-complete',
    mode: 'out-in',
  },
  {
    name: 'tr-in',
    mode: 'out-in',
  },
]);
const transitionIndex = ref(0);
const durationName = computed(() => {
  return (
    animateArr.value[transitionIndex.value]?.duration2 ??
    animateArr.value[transitionIndex.value]?.duration
  );
});

const scaleShow = ref(false);
const toggleScale = () => {
  scaleShow.value = !scaleShow.value;
};

const router = useRouter();
const goTest = () => {
  router.push('/test');
};
</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.tr-enter-active {
  animation: tr-in 0.5s;
}
.tr-leave-active {
  animation: tr-in 0.3s reverse;
}
@keyframes tr-in {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.list-complete-enter-from,
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(200px);
}

.list-complete-move {
  transition: transform 0.8s ease;
}
.list-complete-leave-active {
  position: absolute;
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>
